
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="jQuery,easyform,form validation,javascript,js,jq,jquery,表单验证,插件">
    <meta name="description" content="jQuery.Easyform表单验证插件">

    <title>jQuery.Easyform Demo</title>

    <meta name="description" content="">
    <meta http-equiv="cleartype" content="on">

    <link rel="stylesheet" href="platform-1.css">
    <link rel="stylesheet" href="easyform.css">

    <link rel="stylesheet" href="tab.css">

    <script src="../../jquery-1.10.1.min.js"></script>
    <script src="easyform.js"></script>
</head>
<body>

<div class="page">

    <div class="header">

        <a class="link title-ani"  data-letters="Easyform">Easyform</a>
        <br>

      

    </div>

    <div class="form-div">
        <form id="reg-form" action="" method="post">

            <table>
                <tr>
                    <td>用户名</td>
                    <td><input name="uid" type="text" id="uid"
                               data-easyform="length:4 16;char-normal;real-time;ajax:ajax_demo(1);"
                               data-message="用户名必须为4—16位的英文字母或数字"
                               data-easytip="position:top;class:easy-blue;" data-message-ajax="用户名已存在!">
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input name="psw1" type="password" id="psw1" data-easyform="length:6 16;"
                               data-message="密码必须为6—16位"
                               data-easytip="class:easy-blue;"></td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td><input name="psw2" type="password" id="psw2" data-easyform="length:6 16;equal:#psw1;"
                               data-message="两次密码输入要一致" data-easytip="class:easy-blue;"></td>
                </tr>
                <tr>
                    <td>email</td>
                    <td><input name="email" type="text" id="email" data-easyform="email;real-time;easytip:false;"
                               data-message="Email格式要正确"
                               data-easytip="class:easy-blue;"></td>
                </tr>
                <tr>
                    <td>昵称</td>
                    <td><input name="nickname" type="text" id="nickname" data-easyform="length:2 16;"
                               data-easytip="class:easy-blue;position:bottom;"></td>
                </tr>
            </table>

            <div class="buttons" style="margin-top: 50px;">
                <input value="注 册" type="submit" style="margin-right:20px; margin-top:20px;">
                <input value="我有账号，我要登录" type="button" style="margin-right:45px; margin-top:20px;">
            </div>

            <br class="clear">
        </form>
    </div>

    <!--简介-->
    <div class="source-div">

        <h3>简介</h3>

        <input id="tab1" type="radio" name="tabs2" checked class="tab-input">
        <label for="tab1">说明</label>

        <input id="tab2" type="radio" name="tabs2" class="tab-input">
        <label for="tab2">初始化</label>

        <input id="tab3" type="radio" name="tabs2" class="tab-input">
        <label for="tab3">兼容性</label>


        <section id="content1">
            <p>
                easyform 是一个jQuery插件，包括easyfrom，easytip，两个部分。
            </p>

            <p>
                easyform是表单验证插件，支持复杂的表单验证规则，并且使用简单。甚至可以做到1行js搞定全部。
            </p>

            <p>
                目前支持的控件有：input[text，radio，checkbox]，textarea
            </p>

            <p>
                表单验证，就是这么简单！
            </p>
        </section>

        <section id="content2">
            <p>
                首先记得加载这么几个文件，把他们放在合适的位置：
            </p>

            <p class="code">
                &lt;<span class="keyword">link</span> <span class="attr">rel</span>=<span class="value">"stylesheet"</span>
                <span class="attr">href</span>=<span class="value">"../easyform/easyform.css"</span>&gt;<br>
                &lt;<span class="keyword">script</span> <span class="attr">src</span>=<span class="value">"js/jquery-2.1.0.min.js"</span>&gt;&lt;/<span
                    class="keyword">script</span>&gt;<br>
                &lt;<span class="keyword">script</span> <span class="attr">src</span>=<span class="value">"../easyform/easyform.js"</span>&gt;&lt;/<span
                    class="keyword">script</span>&gt;<br>
            </p>

            <p>其中，jquery-2.1.0.min.js是jQuery，随便选个流行的版本就行。不要低于1.7。顺序别颠倒，因为easyform依赖于jquery，所以要先加载jquery。</p>

            <p>最后，在document的ready里加上。</p>

            <p class="code">
                $("#form").easyform();
            </p>

        </section>

        <section id="content3">
            <p>
                兼容各种主流浏览器，IE10+，其余各种浏览器都没有问题。包括手机上，不过该控件并不是针对手机设计的，所以并没有针对手机做效率优化和操作上的优化。
            </p>

            <p>顺便提一句，别拿这个页面验证兼容性，这个页面很多细节都是html5的，但这些只是为了好看，和控件本身无关。并且因为样式表的兼容性问题，该页面在IE8下面根本无法工作。</p>
        </section>


    </div>

    <!--easyform-->
    <div class="source-div">

        <h3>easyform</h3>

        <input id="tab6" type="radio" name="tabs" checked class="tab-input">
        <label for="tab6">说明</label>

        <input id="tab7" type="radio" name="tabs" class="tab-input">
        <label for="tab7">规则定义</label>

        <input id="tab8" type="radio" name="tabs" class="tab-input">
        <label for="tab8">规则列表</label>

        <input id="tab9" type="radio" name="tabs" class="tab-input">
        <label for="tab9">属性</label>

        <input id="tab92" type="radio" name="tabs" class="tab-input">
        <label for="tab92">方法</label>

        <input id="tab10" type="radio" name="tabs" class="tab-input">
        <label for="tab10">事件</label>

        <input id="tab11" type="radio" name="tabs" class="tab-input">
        <label for="tab11">版本记录</label>

        <section id="content6">
            <p>easyform包含两个类，easyform和easyinput。easyinput负责搞定单个对象的规则验证，很显然，easyform负责调用easyinput。</p>
        </section>

        <section id="content7">
            <p>
                你可以这样定义一个input，并且为它添加一些规则和提示信息。
            </p>

            <p class="code">
                &lt;<span class="keyword">input</span> <span class="attr">name</span>=<span class="value">"uid"</span>
                <span class="attr">type</span>=<span class="value">"text"</span> <span class="attr">id</span>=<span
                    class="value">"uid"</span>
                <span class="attr">data-easyform</span>=<span class="value">"length:4 16;char-normal;"</span>
                <span class="attr">data-message</span>=<span class="value">"用户名必须为4—16位的英文字母或数字"</span>
                <span class="attr">data-easytip</span>=<span class="value">"position:top;"</span>&gt;
            </p>

            <p>
                data-easyform 属性后面可以写上你所需要的规则，用半角的分号连接。语法上有些像css。这个属性不是必须的，你如果什么都不写，那么默认，这个控件的值不能为空，其余无任何规则。
            </p>

            <p>
                data-message 属性是一个默认的提示信息，如果你连这个都不写，那么遇到错误时，会默认提示“格式错误”。你如果需要一个更好的提示信息，写在这里就可以。
            </p>

            <p>
                data-easytip 这个属性是easytip的配置属性，可以不写，这样easytip就会按照默认的样式和行为初始化。
            </p>

        </section>

        <section id="content8" style="text-align: center;">
            <table class="option">
                <thead>
                <tr>
                    <th>规则名称</th>
                    <th width="400">说明</th>
                    <th width="40">类型</th>
                    <th>默认值</th>
                    <th>示例</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>null</td>
                    <td>是否可为空</td>
                    <td>无</td>
                    <td>默认所有值都是必填项</td>
                    <td>data-easyform="null;"</td>
                </tr>
                <tr>
                    <td>email</td>
                    <td>Email地址</td>
                    <td>无</td>
                    <td>无</td>
                    <td>data-easyform="email;"</td>
                </tr>
                <tr>
                    <td>char-normal</td>
                    <td>只能为英文、数字、下划线</td>
                    <td>无</td>
                    <td>无</td>
                    <td>data-easyform="char-normal;"</td>
                </tr>
                <tr>
                    <td>char-chinese</td>
                    <td>只能为中文、英文、数字、下划线、中文标点符号</td>
                    <td>无</td>
                    <td>无</td>
                    <td>data-easyform="char-chinese;"</td>
                </tr>
                <tr>
                    <td>char-english</td>
                    <td>只能为英文、数字、下划线、英文标点符号</td>
                    <td>无</td>
                    <td>无</td>
                    <td>data-easyform="char-english;"</td>
                </tr>
                <tr>
                    <td>length</td>
                    <td>长度限制，可以设置最大值和最小值，如果仅设置了一个值，则长度必须为该长度。宽字符长度为2。</td>
                    <td>int</td>
                    <td>无</td>
                    <td>data-easyform="length:1 10;"<br>data-easyform="length:6;"</td>
                </tr>
                <tr>
                    <td>equal</td>
                    <td>是否与某值相等，可以用来判断密码确认。</td>
                    <td>string</td>
                    <td>无</td>
                    <td>data-easyform="equal:#psw1;"</td>
                </tr>
                <tr>
                    <td>ajax</td>
                    <td>ajax验证，异步。需要通过easyform-ajax事件来返回验证结果。</td>
                    <td>string</td>
                    <td>无</td>
                    <td>data-easyform="ajax:fun(1);"</td>
                </tr>
                <tr>
                    <td>real-time</td>
                    <td>实时检查。如果设置实时检查，则对象每次失去焦点时就会验证一次。</td>
                    <td>无</td>
                    <td>无</td>
                    <td>data-easyform="real-time;"</td>
                </tr>
                <tr>
                    <td>date</td>
                    <td>日期格式 yyyy-mm-dd</td>
                    <td>无</td>
                    <td>无</td>
                    <td>data-easyform="date;"</td>
                </tr>
                <tr>
                    <td>time</td>
                    <td>时间格式 hh:mm:ss</td>
                    <td>无</td>
                    <td>无</td>
                    <td>data-easyform="time;"</td>
                </tr>
                <tr>
                    <td>datetime</td>
                    <td>日期时间格式 yyyy-mm-dd hh:mm:ss</td>
                    <td>无</td>
                    <td>无</td>
                    <td>data-easyform="datetime;"</td>
                </tr>
                <tr>
                    <td>money</td>
                    <td>金额格式，等同于float:10 2</td>
                    <td>无</td>
                    <td>无</td>
                    <td>data-easyform="money;"</td>
                </tr>
                <tr>
                    <td>uint</td>
                    <td>无符号正整数 , 参数为起始值和最大值</td>
                    <td>int</td>
                    <td>默认最大值999999999999999</td>
                    <td>data-easyform="uint:1 100;"</td>
                </tr>
                <tr>
                    <td>number</td>
                    <td>数字字符串，只能是数字，不含小数点</td>
                    <td>无</td>
                    <td>无</td>
                    <td>data-easyform="number;"</td>
                </tr>
                <tr>
                    <td>float</td>
                    <td>浮点数</td>
                    <td>int</td>
                    <td>无</td>
                    <td>data-easyform="float:7 2;"</td>
                </tr>
                <tr>
                    <td>regex</td>
                    <td>自定义正则表达式</td>
                    <td>string</td>
                    <td>无</td>
                    <td>data-easyform="regex:^(\\d{4})-(\\d{2})-(\\d{2})$;"</td>
                </tr>
                </tbody>
            </table>
        </section>

        <section id="content9">
            <p>
                easyform的属性可以在html里或者js中配置，两种方式选择一种即可。
            </p>

            <div style="text-align: center;">
                <table class="option">
                    <thead>
                    <tr>
                        <th>选项</th>
                        <th>说明</th>
                        <th>可选值</th>
                        <th>默认值</th>
                        <th>js示例</th>
                        <th>html示例</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>easytip</td>
                        <td>是否显示easytip</td>
                        <td>true/false</td>
                        <td>true</td>
                        <td>$("#form").easyform({easytip:true});</td>
                        <td>data-easyform="easytip:false;"</td>
                    </tr>
                    <tr>
                        <td>is_submit</td>
                        <td>是否执行提交，该值为false时，将不执行提交。</td>
                        <td>true/false</td>
                        <td>true</td>
                        <td>ef = $("#form").easyform(); ef.is_submit = false;</td>
                        <td>不能在HTML中赋值</td>
                    </tr>
                    </tbody>
                </table>
            </div>

        </section>

        <section id="content92">
            <table class="option">
                <thead>
                <tr>
                    <th width="40">方法</th>
                    <th width="150">说明</th>
                    <th width="400">参数</th>
                    <th>示例</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>submit</td>
                    <td>提交表单</td>
                    <td>@submit bool 是否提交表单，如果为false，则只验证，不提交。</td>
                    <td>
                        var ef = $('#demo-form').easyform();<br>
                        ef.submit(true);
                    </td>
                </tr>
                <tr>
                    <td>check</td>
                    <td>检查表单的部分内容</td>
                    <td>@iterator string 用来定义检查哪些控件。</td>
                    <td>
                        var ef = $('#demo-form').easyform();<br>
                        ef.check("input[type=text]");
                    </td>
                </tr>
                </tbody>
            </table>

        </section>

        <section id="content10" style="text-align: center;">

            <table class="option">
                <thead>
                <tr>
                    <th width="80">事件</th>
                    <th width="500">说明</th>
                    <th width="80">参数</th>
                    <th>示例</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>success</td>
                    <td>成功事件，所有规则成功后，触发该事件。该事件的触发在提交之前。</td>
                    <td>easyform</td>
                    <td>

                        var ef = $('#demo-form').easyform();<br>
                        ef.success = function(ef){ ... }<br>
                        或者<br>
                        var ef = $('#demo-form').easyform({<br>
                        "success":function(ef){...}<br>
                        });
                    </td>
                </tr>
                <tr>
                    <td>error</td>
                    <td>错误事件，每一个发生错误的控件都会触发该事件。一次验证，所有规则都会执行，一个控件上可能同时触发多个error事件。</td>
                    <td>easyform, input, rule</td>
                    <td>
                        var ef = $('#demo-form').easyform();<br>
                        ef.error = function(ef, i, r){ ... }<br>
                        或者<br>
                        var ef = $('#demo-form').easyform({<br>
                        "error":function(ef, i, r){...}<br>
                        });
                    </td>
                </tr>
                <tr>
                    <td>complete</td>
                    <td>完成事件，表单完整验证一次后，触发该事件。该事件优先级低于error和success。</td>
                    <td>easyform</td>
                    <td>
                        var ef = $('#demo-form').easyform();<br>
                        ef.complete = function(ef){ ... }<br>
                        或者<br>
                        var ef = $('#demo-form').easyform({<br>
                        "complete":function(ef){...}<br>
                        });
                    </td>
                </tr>
                <tr>
                    <td>per_validation</td>
                    <td>预验证事件，在所有验证规则之前执行。该事件的响应函数如果返回false，则会打断提交。</td>
                    <td>easyform</td>
                    <td>
                        var ef = $('#demo-form').easyform();<br>
                        ef.per_validation = function(ef){ ... }<br>
                        或者<br>
                        var ef = $('#demo-form').easyform({<br>
                        "per_validation":function(ef){...}<br>
                        });
                    </td>
                </tr>
                </tbody>
            </table>

        </section>

        <section id="content11">

            <ul>
                <li>2016-2-17 easyform的事件支持在初始化的时候配置了。支持表单的部分验证。添加了身份证验证规则。</li>
                <li>2015-11-28 修正了一处null规则可能引起表单不能提交的bug。</li>
                <li>2015-10-19 为easyinput类增加了complete事件。修正了在real-time规则下，easytip的状态同步问题。</li>
                <li>2015-6-10 为easyinput类添加了一个析构函数，用于修正real-time下的重复验证问题，该修正是对前几次针对这个问题的修正的优化处理。</li>
                <li>2015-6-9 修正了规则计数错误，和real-time属性相关(感谢梦在远方的指正)。</li>
                <li>2015-6-8 修正了一个和radio、checkbox相关的bug。修正了一个和提交相关的bug。</li>
                <li>2015-5-24 修改了很多bug，对代码进行了重构。属性定义修改成了html5的标准命名。所以这个版本不兼容过去的老版本。不过无所谓了，你们也找不到老版本。</li>
                <li>2015-4-10 修正了input没有easyform属性时，不提交表单的bug。</li>
                <li>2014-11-21 支持ajax异步验证。修正了若干bug。</li>
                <li>2014-11-18 支持实时检查。支持多条件的提示信息。</li>
                <li>2014-11-5 第一版完成。</li>
            </ul>

        </section>

    </div>

    <!--例子-->
    <div class="source-div">

        <h3>例子</h3>

        <input id="tab14" type="radio" name="tabs3" checked class="tab-input">
        <label for="tab14">ajax</label>

        <input id="tab15" type="radio" name="tabs3" class="tab-input">
        <label for="tab15">正则表达式</label>

        <input id="tab17" type="radio" name="tabs3" class="tab-input">
        <label for="tab17">message</label>

        <input id="tab16" type="radio" name="tabs3" class="tab-input">
        <label for="tab16">radio & checkbox</label>

        <section id="content14">
            <p>
                在任意input的data-easyform属性中，添加ajax:fun(a,b,c);就可以定义一个ajax验证规则。其中ajax是固定的，fun是函数名称，任意一个函数都可以，当然函数里即使没执行ajax也无所谓。函数的参数也是完全自定义的，没有任何硬性要求。
            </p>

            <p>唯一需要注意的是，ajax规则通过在input上添加easyform-ajax事件来监听验证结果，所以需要你在你的自定义函数中返回easyform-ajax事件，就像这样：</p>

            <p class="code">$("#uid").trigger("easyform-ajax", false);</p>

            <p>true/false代表验证的成功或失败。</p>
        </section>

        <section id="content15">
            <p>
                有些时候，你需要定义自己的规则，所以我添加了一个regex规则，这个规则用于执行你自定义的正则表达式。
            </p>

            <p class="code">data-easyform="^(\\d{4})-(\\d{2})-(\\d{2})$;"</p>

            <p>类似这样的定义即可。需要注意的是\\需要写两次，因为会被转意，而开头和结尾的/不要写进去。</p>

        </section>

        <section id="content17">
            <p>data-message属性可以定义一个提示信息，例如“出错啦！”，但有时候仅仅这样是不够的，我们想按照不同的错误给出不同的提示信息，这样才能提供更好的用户体验！</p>

            <p>于是，我们可以这样定义 data-message-length 或者 data-messgae-ajax，在不同情况，定义不一样的提示。data-message-规则名称 就可以根据规则定义不同的提示。当然，你不必为每一个规则都定义一句话，那样太傻了，所以默认的data-message将为每一个没有特例的规则提供默认的信息。</p>

            <p>最后，你其实也可以不定义任何message，默认会有那么一句话——“格式错误”。</p>
        </section>

        <section id="content16">
            <p>
                这个插件支持radio和checkbox，但因为这两个控件的特殊性，所以，只有null规则对这两个控件有效，另外，这两个控件都是成组使用的，所以，每组控件只有第一个会被验证，其余的控件，即使定义了data-easyfrom、data-message之类的属性，也会被忽略。
            </p>

            <p>另外，easytip的定位，是基于宿主的位置的。某些更改radio和checkbox外观的插件，会将他们藏起来，用label或其他标签代替，这种情况下，easytip将无法正确显示。</p>


        </section>

    </div>

    <div class="form-div">
        <form id="demo-form" action="" method="post">

            <table style="line-height: 40px;">
                <tr>
                    <th width="60">性别</th>
                    <td style="text-align: left;">
                        <input name="sex" type="radio" id="sex-1" value="1" class="css-checkbox"
                               data-message="请选择一个性别"><label class="radio-label" for="sex-1">男</label>
                        <input name="sex" type="radio" id="sex-2" value="0" class="css-checkbox">
                        <label class="radio-label" for="sex-2">女</label>
                    </td>
                </tr>
                <tr>
                    <th>爱好</th>
                    <td style="text-align: left;">
                        <input name="hobby[]" type="checkbox" id="hobby-1" value="1" class="css-checkbox"
                               data-easyform="null;">
                        <label class="checkbox-label" for="hobby-1">电影</label>
                        <input name="hobby[]" type="checkbox" id="hobby-2" value="2" class="css-checkbox"><label
                            class="checkbox-label" for="hobby-2">读书</label>
                        <input name="hobby[]" type="checkbox" id="hobby-3" value="3" class="css-checkbox"><label
                            class="checkbox-label" for="hobby-3">旅行</label>
                        <input name="hobby[]" type="checkbox" id="hobby-4" value="4" class="css-checkbox"><label
                            class="checkbox-label" for="hobby-4">游戏</label>
                    </td>
                </tr>
                <tr>
                    <th>简介</th>
                    <td><textarea id="about" name="about" style="width: 300px;"></textarea></td>
                </tr>
            </table>

            <div class="buttons" style="margin-top: 50px;">
                <input value="保 存" type="submit" style="margin-right:20px; margin-top:20px;">
            </div>

            <br class="clear">
        </form>
    </div>

    <!--easytip-->
    <div class="source-div">

        <h3>easytip</h3>

        <input id="tab21" type="radio" name="tabs4" checked class="tab-input">
        <label for="tab21">说明</label>

        <input id="tab22" type="radio" name="tabs4" class="tab-input">
        <label for="tab22">属性</label>

        <input id="tab23" type="radio" name="tabs4" class="tab-input">
        <label for="tab23">方法</label>

        <input id="tab24" type="radio" name="tabs4" class="tab-input">
        <label for="tab24">事件</label>

        <section id="content21">
            <p>
                easytip虽然被用于easyform，但其实easytip是可以独立作为一个tooltip插件使用的。
            </p>

            <p>从上面的例子也可以看到，easytip的外观是可以定制的。而且很简单。我内置了几套样式，你也可以写新的。</p>

            <p>easytip使用起来也很简单。</p>

            <p class="code">
                var tip=$("#uid").easytip();<br>
                tip.show("Hello!");
            </p>

            <p>注意，easytip的z-index是9000。</p>

        </section>

        <section id="content22" style="text-align: center;">
            <p style="text-align: left;">
                所有这些配置都可以像data-easyform属性一样，写在data-easytip属性里，也和easyform一样，js配置或者html配置写一个即可。
            </p>
            <table class="option">
                <thead>
                <tr>
                    <th width="80">项目</th>
                    <th width="300">说明</th>
                    <th width="250">可选值</th>
                    <th>默认值</th>
                    <th>示例</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>position</td>
                    <td>tip出现的位置</td>
                    <td>top, left, bottom, right</td>
                    <td>right</td>
                    <td>$("#uid").easytip({position:top});<br>data-easytip="position:top;"</td>
                </tr>
                <tr>
                    <td>left</td>
                    <td>tip出现的位置的X轴偏移量，不要加px这类的单位。</td>
                    <td>int</td>
                    <td>0</td>
                    <td>$("#uid").easytip({left:100});<br>data-easytip="left:100;"</td>
                </tr>
                <tr>
                    <td>top</td>
                    <td>tip出现的位置的Y轴偏移量，不要加px这类的单位。</td>
                    <td>int</td>
                    <td>0</td>
                    <td>$("#uid").easytip({top:100});<br>data-easytip="top:100;"</td>
                </tr>
                <tr>
                    <td>disappear</td>
                    <td>tip消失的方式。</td>
                    <td>self：点击自己, other：点击其他, lost-focus：失去焦点, none：永不消失, N：N毫秒后消失</td>
                    <td>other</td>
                    <td>$("#uid").easytip({disappear:other});<br>$("#uid").easytip({disappear:100});<br>data-easytip="disappear:100;"
                    </td>
                </tr>
                <tr>
                    <td>speed</td>
                    <td>出现和消失的动画速度。</td>
                    <td>和jquery的fadeIn函数一致</td>
                    <td>fast</td>
                    <td>$("#uid").easytip({speed:"normal"});<br>data-easytip="speed:200;"</td>
                </tr>
                <tr>
                    <td>class</td>
                    <td>样式。easyform.css里有几个默认的样式定义。</td>
                    <td>string</td>
                    <td>easy-white</td>
                    <td>$("#uid").easytip({class:"easy-red"});<br>data-easytip="class:easy-red;"</td>
                </tr>

                <tr>
                    <td>parent</td>
                    <td>easytip的宿主，即easytip指向的对象。</td>
                    <td>Document Object</td>
                    <td>无</td>
                    <td>只读，不可赋值</td>
                </tr>

                <tr>
                    <td>hover_show</td>
                    <td>鼠标移动到parent时，是否显示tip，即作为一个tooltip来使用。注意：此属性将与表单验证的相关设置有冲突，所以一旦使用hover_show = "true"。表单验证时，该parent的tip显示将不受easyform控制。</td>
                    <td>string</td>
                    <td>false</td>
                    <td>$("#uid").easytip({hover_show:"true"});<br>data-easytip="class:true;"</td>
                </tr>
                <tr>
                    <td>is_show</td>
                    <td>是否显示</td>
                    <td>bool</td>
                    <td>false</td>
                    <td>只读，不可赋值</td>
                </tr>

                </tbody>
            </table>
        </section>

        <section id="content23" style="text-align: center;">
            <table class="option">
                <thead>
                <tr>
                    <th width="200">方法</th>
                    <th width="320">说明</th>
                    <th>参数</th>
                    <th>返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>show(msg)</td>
                    <td>显示tip。</td>
                    <td>msg：string，要显示的消息。</td>
                    <td>无</td>
                </tr>
                <tr>
                    <td>close</td>
                    <td>关闭提示信息</td>
                    <td>无</td>
                    <td>无</td>
                </tr>
                </tbody>
            </table>

        </section>

        <section id="content24" style="text-align: center;">
            <table class="option">
                <thead>
                <tr>
                    <th width="80">事件</th>
                    <th width="320">说明</th>
                    <th>参数</th>
                    <th>示例</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>onshow</td>
                    <td>显示事件，开始显示的第一件事就是执行该事件。</td>
                    <td>parent, tip</td>
                    <td>$("#uid").easytip({onshow:function(parent, tip){ ... });</td>
                </tr>
                <tr>
                    <td>onclose</td>
                    <td>隐藏事件，tip从显示状态切换成不显示时触发该事件。</td>
                    <td>parent, tip</td>
                    <td>$("#uid").easytip({onclose:function(parent, tip){ ... });</td>
                </tr>
                </tbody>
            </table>

        </section>

    </div>

    <div id="tip-test1" class="tooltip-demo" data-easytip="position:top;hover_show:true;class:easy-black;" data-easytip-message="一个例子">easytip例子</div>
    <div id="tip-test2" class="tooltip-demo" data-easytip="position:left;hover_show:true;" data-easytip-message="一个例子">easytip例子</div>
    <div id="tip-test3" class="tooltip-demo" data-easytip="position:bottom;hover_show:true;class:easy-red;" data-easytip-message="一个例子">easytip例子</div>
    <div id="tip-test4" class="tooltip-demo" data-easytip="position:right;hover_show:true;class:easy-blue;" data-easytip-message="一个例子">easytip例子</div>

    <br class="clear">

    <div class="footer">
        十分感谢你的光临，如果有什么问题，可以加QQ群，222578556（Hello PHP），我是群主：大树。
    </div>

</div>

<script>

    $(document).ready(function ()
    {
        var v = $('#reg-form').easyform();

        $('#demo-form').easyform();

        v.is_submit = false;

        v.error = function (ef, i, r)
        {
            //console.log("Error事件：" + i.id + "对象的值不符合" + r + "规则");
        };

        v.success = function (ef)
        {
            //console.log("成功");
        };

        v.complete = function (ef)
        {
            console.log("完成");
        };

        $('#tip-test1').easytip();
        $('#tip-test2').easytip();
        $('#tip-test3').easytip();
        $('#tip-test4').easytip();


    });

    function ajax_demo(p)
    {
        $("#uid").trigger("easyform-ajax", true);
    }


</script>

</body>
</html>
